<template>
	<view class="container">
		<view class="title">付款详情</view>
		
		<view class="card">
			<view class="card-item">
				<text class="label">商户账户</text>
				<text class="content">{{merchant.merchantAccountNumber}}</text>
			</view>
			
			<view class="card-item">
				<text class="label">商户名称</text>
				<text class="content">{{merchant.merchantName}}</text>
			</view>
			
			<view class="card-item">
				<text class="label">商户类别</text>
				<text class="content">{{merchant.categoryname}}</text>
			</view>
			
			<view class="card-item">
				<text class="label">付款金额</text>
				<text class="content">{{amount|MoneyFormat}}</text>
			</view>						
		</view>
		
		<button type="primary" @click="payByPwd('wallet')">钱包余额付款</button>
				
		<view class="pay-btn-box">
			<view class="choose_account">
				<view>
					<image src="../../static/icon/yinhangka.png"></image>
				</view>			
				<view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view>{{array[index]}}</view>
					</picker>
				</view>	
				<view>
					&gt;
				</view>
			</view>
			<button type="primary" @click="payByPwd('card')">银行卡付款</button>
		</view>			
			
		<uni-popup ref="popup" type="center">
			<view class="pwd_box">
				<input type="number" password="true" class="pwd_input" placeholder="请输入支付密码" v-model="payPwd">
				<button type="default" @click="pay">确认支付</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//写死商户列表
	var merchantArray = [
		{
			merchantNumber:'HK0001001000138656',
			merchantAccountNumber:'HK670001132003199696002',
			merchantName:'Baby Outlet',
			categoryname:'Clothing & Accessories, Textiles'			
		},
		{
			merchantNumber:'HK0001001000162802',
			merchantAccountNumber:'HK870001118003207144002',
			merchantName:'Bar Pac Lxxi Internatl Ltd',
			categoryname:'Dining & Entertainment, Shopping & Travel'			
		},
		{
			merchantNumber:'HK0001001000157856',
			merchantAccountNumber:'HK200001172003196754002',
			merchantName:'Beauty Foot (Kln Br)',
			categoryname:'Medical, Beauty & Health Care Services'			
		},
		{
			merchantNumber:'HK0001001000152615',
			merchantAccountNumber:'HK130001129003200587002',
			merchantName:'Gold City Gold Bar Ltd',
			categoryname:'Gifts, Florists, Jewellery, Toys'			
		}
	]
	
	import Global from '../../common/global.js'
	import uniPop from '../../components/uni-popup/uni-popup.vue'
		
	export default {
		data() {
			return {
				customerNumber:'',
				accountNumber:'',
				merchantNumber:'',
				amount:'',
				merchant:{},
				payPwd:'',
				bindCardList:[],
				array:[],
				index:0,
				payType:''
			}
		},
		methods: {
			// 选择框事件
			bindPickerChange: function(e) {			 
			    this.index = e.target.value
			},
			//钱包余额付款密码确认
			payByPwd(payType) {
				//确认支付密码
				this.$refs.popup.open()	
				//记录支付类型
				this.payType = payType
				//
				this.payPwd = ''
			},
			//支付
			pay(){
				this.$refs.popup.close()
				
				//验证支付密码
				uni.request({
					url: Global.BASE_URL + '/ewallet/checkPayPwd',
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						customerNumber:this.customerNumber,
						payPwd:this.payPwd
					},
					method:'POST',
					success:(res)=>{ //注意使用箭头函数	
					
						if (res.data == true) {
							
							if (this.payType == 'wallet') {
								this.payByWallet()
							}
							
							if (this.payType == 'card') {
								this.payByCard()
							}							
							
						} else {
							this.$refs.popup.close()
							this.payPwd = ''
							
							uni.showToast({
								title:'密码输入错误',
								icon:'none'
							})
						}					
					},
					fail(err) {
						uni.showToast({
							title:'验证登录密码接口调用失败',
							icon:'none'
						})
					}
				})
			},			
			//钱包余额付款
			payByWallet(){
								
				new Promise((resolve, reject) => {					
					//进行当前钱包余额校验
					uni.request({
						url: Global.BASE_URL + '/ewallet/queryCustomer',
						header:{
							'content-type': 'application/x-www-form-urlencoded'
						},
						data:{
							customerNumber:this.customerNumber										
						},
						method:'POST',
						success:(res)=>{ //注意使用箭头函数						
							if (parseFloat(res.data.balance) >= parseFloat(this.amount)) {
								resolve(res);
							} else {
								reject("钱包余额不足，请先充值");
							}
						},
						fail(err) {
							uni.showToast({
								title:'查询客户接口调用失败',
								icon:'none'
							})
						}
					})	
					
				})
				.then(res => {					
					uni.showModal({
						title: '付款提示',
						content: '确认支付' + this.amount + '?' ,
						success: (res)=> {
							if (res.confirm) {								
								//钱包支付
								uni.request({
									url: Global.BASE_URL + '/ewallet/payByEwallet',
									header:{
										'content-type': 'application/x-www-form-urlencoded'
									},
									data:{
										customerNumber:this.customerNumber,
										merchantAccountNumber:this.merchant.merchantAccountNumber,
										transactionAmount:this.amount
									},
									method:'POST',
									success:(res)=>{ //注意使用箭头函数						
										uni.showToast({
											title:'支付成功',
											duration: 1000
										})
										
										setTimeout(()=>{
											uni.switchTab({
												url:'../home/home'
											})
										},1000);
									},
									fail(err) {
										uni.showToast({
											title:'电子钱包支付接口调用失败',
											icon:'none'
										})
									}
								})
								
							} 
						}
					});					
				})
				.catch(err => {
					uni.showToast({
						title:err,
						icon:'none'
					})
				})				
								
			},
			//银行卡付款
			payByCard() {					
				uni.showModal({
					title: '付款提示',
					content: '确认支付' + this.amount + '?' ,
					success: (res)=> {
						if (res.confirm) {
							
							//银行卡支付
							uni.request({
								url: Global.BASE_URL + '/ewallet/payByCard',
								header:{
									'content-type': 'application/x-www-form-urlencoded'
								},
								data:{
									customerNumber:this.customerNumber,
									accountNumber:this.array[this.index],
									merchantAccountNumber:this.merchant.merchantAccountNumber,
									transactionAmount:this.amount,
									accountType:this.bindCardList[this.index].accountType
								},
								method:'POST',
								success:(res)=>{ //注意使用箭头函数						
									uni.showToast({
										title:'支付成功',
										duration: 1000
									})
									
									setTimeout(()=>{
										uni.switchTab({
											url:'../home/home'
										})
									},1000);
								},
								fail(err) {
									uni.showToast({
										title:'银行卡支付接口调用失败',
										icon:'none'
									})
								}
							})
							
						} 
					}
				});	
								
			}
		},
		onLoad(options) {
			//获得商户账号
			this.merchantNumber = options.merchantNumber;
			//获得付款金额
			this.amount = options.amount;
			//读取出客户编号
			this.customerNumber = uni.getStorageSync('customerNumber')
			//根据商户账号得到商户信息
			this.merchant = merchantArray.find(function(item){
				
				return item.merchantNumber == options.merchantNumber;
			})
			
			//读取绑卡列表
			uni.request({
				url: Global.BASE_URL + '/ewallet/queryBindAccountByCustomer',
				header:{
					'content-type': 'application/x-www-form-urlencoded'
				},
				data:{
					customerNumber:this.customerNumber
				},
				method:'POST',
				success:(res)=>{ //注意使用箭头函数	 
					this.bindCardList = res.data
				
					this.array = res.data.map(function(item){						
						return item.accountNumber						
					}) 						
				},
				fail(err) {
					uni.showToast({
						title:'查询用户绑定银行卡列表接口调用失败',
						icon:'none'
					})
				}
			})
		},
		components:{
			"uni-popup":uniPop
		}
	}
</script>

<style>
	page {
		background: #EDEDED;
	}
	
	.container {
		padding: 15rpx;
		color: #959595;
	}
	
	.title {
		color: #333333;
		font-size: 30rpx;		
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.card {		
		font-size: 30rpx;		
		background-color: #FFFFFF;
		/* border-radius: 25rpx; */
		margin-bottom: 30rpx;
	}
		
	.card .card-item {
		display: flex;
		justify-content: left;
		min-height: 70rpx;
		line-height: 70rpx;
		border-bottom: 1px solid #eeeeee;
		padding-left: 30rpx;
	}
	
	.card .label {		
		width: 200rpx;
	}
	
	.card .content {
		color: #007AFF;	
		width: 520rpx;
	}
			
	.pay-btn-box {
		background-color: #FFFFFF;
		padding: 30rpx 0;
		margin-top: 20rpx;
		/* border-radius: 25rpx; */
	}
		
	.choose_account {
		font-size: 40rpx;
		display: flex;
		justify-content:space-around;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.choose_account image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.pwd_box {
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding: 30rpx;
	}
	
	.pwd_input {
		padding: 0 15rpx;
		font-size: 40rpx;
		height: 100rpx;	
	}
	
	.pwd_box button {
		background-color: #FFFFFF;
	}
</style>